<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>面试官：Vue组件之间的通信方式都有哪些？ | vivace-itnerview</title>
    <meta name="description" content="interview docs">
    <link rel="stylesheet" href="/assets/style.f9ffe3f5.css">
    <link rel="modulepreload" href="/assets/chunks/VPAlgoliaSearchBox.ea0e7bf0.js">
    <link rel="modulepreload" href="/assets/app.1cdb2ec5.js">
    <link rel="modulepreload" href="/assets/vue_communication.md.3f059e41.lean.js">
    
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-ca9ccb7e><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-ca9ccb7e data-v-a71a30f1><div class="VPNavBar has-sidebar" data-v-a71a30f1 data-v-a35e6f52><div class="container" data-v-a35e6f52><div class="VPNavBarTitle has-sidebar" data-v-a35e6f52 data-v-d5925166><a class="title" href="/" data-v-d5925166><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" data-v-e13a1912><!--]--><!--[-->Web Interview<!--]--><!--[--><!--]--></a></div><div class="content" data-v-a35e6f52><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a35e6f52 style="--38a1667b:&#39;Meta&#39;;"><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a35e6f52 data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/css/box.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->CSS<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-f83db6ba data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6ffb57d3><span class="text" data-v-6ffb57d3><!----> JavaScript <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-6ffb57d3><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><div class="items" data-v-1c5d0cfc><!--[--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/JavaScript/data_type.html" data-v-e8e0fb1d data-v-3c355974><!--[-->JavaScript<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/es6/var_let_const.html" data-v-e8e0fb1d data-v-3c355974><!--[-->es6<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/typescript/typescript_javascript.html" data-v-e8e0fb1d data-v-3c355974><!--[-->Typescript<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-f83db6ba data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6ffb57d3><span class="text" data-v-6ffb57d3><!----> 框架 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-6ffb57d3><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><div class="items" data-v-1c5d0cfc><!--[--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/vue/vue.html" data-v-e8e0fb1d data-v-3c355974><!--[-->Vue<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/vue3/goal.html" data-v-e8e0fb1d data-v-3c355974><!--[-->Vue3<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/React/React.html" data-v-e8e0fb1d data-v-3c355974><!--[-->React<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/webpack/webpack.html" data-v-e8e0fb1d data-v-3c355974><!--[-->webpack<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/NodeJS/nodejs.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->node<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/algorithm/Algorithm.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Algorithm<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/applet/applet.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->小程序<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/http/HTTP_HTTPS.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->http<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/git/version_control.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Git<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a35e6f52 data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-a3e7452b data-v-968780f1 data-v-086e8519><span class="check" data-v-086e8519><span class="icon" data-v-086e8519><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-968780f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-968780f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a35e6f52 data-v-738bef5a data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://github.com/xiumubai" target="_blank" rel="noopener" data-v-f6988cfb data-v-e57698f6><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a35e6f52 data-v-e89b88d7 data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-6ffb57d3><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-6ffb57d3><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><!----><!--[--><!--[--><!----><div class="group" data-v-e89b88d7><div class="item appearance" data-v-e89b88d7><p class="label" data-v-e89b88d7>Appearance</p><div class="appearance-action" data-v-e89b88d7><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-e89b88d7 data-v-968780f1 data-v-086e8519><span class="check" data-v-086e8519><span class="icon" data-v-086e8519><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-968780f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-968780f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-e89b88d7><div class="item social-links" data-v-e89b88d7><div class="VPSocialLinks social-links-list" data-v-e89b88d7 data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://github.com/xiumubai" target="_blank" rel="noopener" data-v-f6988cfb data-v-e57698f6><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a35e6f52 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-ca9ccb7e data-v-aac27d5e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-aac27d5e><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-aac27d5e><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-aac27d5e>Menu</span></button><a class="top-link" href="#" data-v-aac27d5e> Return to top </a></div><aside class="VPSidebar" data-v-ca9ccb7e data-v-f332cb62><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-f332cb62><span class="visually-hidden" id="sidebar-aria-label" data-v-f332cb62> Sidebar Navigation </span><!--[--><div class="group" data-v-f332cb62><section class="VPSidebarGroup collapsible" data-v-f332cb62 data-v-2976c796><div class="title" role="button" data-v-2976c796><h2 class="title-text" data-v-2976c796>Vue2 系列</h2><div class="action" data-v-2976c796><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-2976c796><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-2976c796><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-2976c796><!--[--><a class="VPLink link link" href="/vue/vue.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>1.说说你对vue的理解?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/spa.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>2.说说你对SPA（单页应用）的理解?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/show_if.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>3.Vue中的v-show和v-if怎么理解？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/new_vue.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>4.Vue实例挂载的过程中发生了什么?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/lifecycle.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>5.说说你对Vue生命周期的理解?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/if_for.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>6.为什么Vue中的v-if和v-for不建议一起用?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/first_page_time.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>7.SPA（单页应用）首屏加载速度慢怎么解决？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/data.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>8.为什么data属性是一个函数而不是一个对象？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/data_object_add_attrs.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>9.Vue中给对象添加新属性界面不刷新?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/components_plugin.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>10.Vue中组件和插件有什么区别？</span><!----><!--]--><!----></a><a class="VPLink link link active" href="/vue/communication.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>11.Vue组件间通信方式都有哪些?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/bind.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>12.说说你对双向绑定的理解?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/nexttick.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>13.说说你对nexttick的理解?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/mixin.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>14.说说你对vue的mixin的理解，有什么应用场景？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/slot.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>15.说说你对slot的理解？slot使用场景有哪些？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/observable.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>16.Vue.observable你有了解过吗？说说看</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/key.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>17.你知道vue中key的原理吗？说说你对它的理解？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/keepalive.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>18.怎么缓存当前的组件？缓存后怎么更新？说说你对keep-alive的理解是什么？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/modifier.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>19.Vue常用的修饰符有哪些？有什么应用场景？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/directive.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>20.你有写过自定义指令吗？自定义指令的应用场景有哪些？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/filter.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>21.Vue中的过滤器了解吗？过滤器的应用场景有哪些？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/vnode.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>22.什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/diff.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>23.你了解vue的diff算法吗？说说看</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/axios.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>24.Vue项目中有封装过axios吗？主要是封装哪方面的？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/axiosCode.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>25.你了解axios的原理吗？有看过它的源码吗？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/ssr.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>26.SSR解决了什么问题？有做过SSR吗？你是怎么做的？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/structure.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>27.说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/permission.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>28.vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/cors.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>29.Vue项目中你是如何解决跨域的呢？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/404.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>30.vue项目本地开发完成后部署到服务器后报404是什么原因呢？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/error.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>31.你是怎么处理vue项目中的错误的？</span><!----><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-ca9ccb7e data-v-c95df128><div class="VPDoc has-sidebar has-aside" data-v-c95df128 data-v-f0af2311><div class="container" data-v-f0af2311><div class="aside" data-v-f0af2311><div class="aside-curtain" data-v-f0af2311></div><div class="aside-container" data-v-f0af2311><div class="aside-content" data-v-f0af2311><div class="VPDocAside" data-v-f0af2311 data-v-aea49c31><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-aea49c31 data-v-a3de185c><div class="content" data-v-a3de185c><div class="outline-marker" data-v-a3de185c></div><div class="outline-title" data-v-a3de185c>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-a3de185c><span class="visually-hidden" id="doc-outline-aria-label" data-v-a3de185c> Table of Contents for current page </span><ul class="root" data-v-a3de185c><!--[--><li data-v-a3de185c><a class="outline-link" href="#一、组件间通信的概念" data-v-a3de185c>一、组件间通信的概念</a><!----></li><li data-v-a3de185c><a class="outline-link" href="#二、组件间通信解决了什么" data-v-a3de185c>二、组件间通信解决了什么</a><!----></li><li data-v-a3de185c><a class="outline-link" href="#二、组件间通信的分类" data-v-a3de185c>二、组件间通信的分类</a><!----></li><li data-v-a3de185c><a class="outline-link" href="#三、组件间通信的方案" data-v-a3de185c>三、组件间通信的方案</a><!----></li><li data-v-a3de185c><a class="outline-link" href="#参考文献" data-v-a3de185c>参考文献</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-aea49c31></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-f0af2311><div class="content-container" data-v-f0af2311><!--[--><!--]--><main class="main" data-v-f0af2311><div style="position:relative;" class="vp-doc _vue_communication" data-v-f0af2311><div><h1 id="面试官：vue组件之间的通信方式都有哪些？" tabindex="-1">面试官：Vue组件之间的通信方式都有哪些？ <a class="header-anchor" href="#面试官：vue组件之间的通信方式都有哪些？" aria-hidden="true">#</a></h1><p><img src="https://static.vue-js.com/7de50d20-3aca-11eb-85f6-6fac77c0c9b3.png" alt=""></p><h2 id="一、组件间通信的概念" tabindex="-1">一、组件间通信的概念 <a class="header-anchor" href="#一、组件间通信的概念" aria-hidden="true">#</a></h2><p>开始之前，我们把<strong>组件间通信</strong>这个词进行拆分</p><ul><li>组件</li><li>通信</li></ul><p>都知道组件是<code>vue</code>最强大的功能之一，<code>vue</code>中每一个<code>.vue</code>我们都可以视之为一个组件通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上，任何信息的交通都是通信<strong>组件间通信</strong>即指组件(<code>.vue</code>)通过某种方式来传递信息以达到某个目的举个栗子我们在使用<code>UI</code>框架中的<code>table</code>组件，可能会往<code>table</code>组件中传入某些数据，这个本质就形成了组件之间的通信</p><h2 id="二、组件间通信解决了什么" tabindex="-1">二、组件间通信解决了什么 <a class="header-anchor" href="#二、组件间通信解决了什么" aria-hidden="true">#</a></h2><p>在古代，人们通过驿站、飞鸽传书、烽火报警、符号、语言、眼神、触碰等方式进行信息传递，到了今天，随着科技水平的飞速发展，通信基本完全利用有线或无线电完成，相继出现了有线电话、固定电话、无线电话、手机、互联网甚至视频电话等各种通信方式从上面这段话，我们可以看到通信的本质是信息同步，共享回到<code>vue</code>中，每个组件之间的都有独自的作用域，组件间的数据是无法共享的但实际开发工作中我们常常需要让组件之间共享数据，这也是组件通信的目的要让它们互相之间能进行通讯，这样才能构成一个有机的完整系统</p><h2 id="二、组件间通信的分类" tabindex="-1">二、组件间通信的分类 <a class="header-anchor" href="#二、组件间通信的分类" aria-hidden="true">#</a></h2><p>组件间通信的分类可以分成以下</p><ul><li>父子组件之间的通信</li><li>兄弟组件之间的通信</li><li>祖孙与后代组件之间的通信</li><li>非关系组件间之间的通信</li></ul><p>关系图:</p><p><img src="https://static.vue-js.com/85b92400-3aca-11eb-ab90-d9ae814b240d.png" alt=""></p><h2 id="三、组件间通信的方案" tabindex="-1">三、组件间通信的方案 <a class="header-anchor" href="#三、组件间通信的方案" aria-hidden="true">#</a></h2><p>整理<code>vue</code>中8种常规的通信方案</p><ol><li>通过 props 传递</li><li>通过 $emit 触发自定义事件</li><li>使用 ref</li><li>EventBus</li><li>$parent 或$root</li><li>attrs 与 listeners</li><li>Provide 与 Inject</li><li>Vuex</li></ol><h3 id="props传递数据" tabindex="-1">props传递数据 <a class="header-anchor" href="#props传递数据" aria-hidden="true">#</a></h3><p><img src="https://static.vue-js.com/8f80a670-3aca-11eb-ab90-d9ae814b240d.png" alt=""></p><ul><li>适用场景：父组件传递数据给子组件</li><li>子组件设置<code>props</code>属性，定义接收父组件传递过来的参数</li><li>父组件在使用子组件标签中通过字面量来传递值</li></ul><p><code>Children.vue</code></p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#FFCB6B;">props</span><span style="color:#89DDFF;">:{</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#676E95;">// 字符串形式  </span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">String</span><span style="color:#F07178;"> </span><span style="color:#676E95;">// 接收的类型参数  </span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#676E95;">// 对象形式  </span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">age</span><span style="color:#89DDFF;">:{</span><span style="color:#F07178;">    </span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#FFCB6B;">type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">Number</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;">// 接收的类型为数值  </span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#FFCB6B;">defaule</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">18</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;">  </span><span style="color:#676E95;">// 默认值为18  </span></span>
<span class="line"><span style="color:#F07178;">       </span><span style="color:#FFCB6B;">require</span><span style="color:#89DDFF;">:</span><span style="color:#FF9CAC;">true</span><span style="color:#F07178;"> </span><span style="color:#676E95;">// age属性必须传递  </span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"></span></code></pre></div><p><code>Father.vue</code>组件</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Children</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">jack</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">age</span><span style="color:#89DDFF;">=18 /&gt;</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"></span></code></pre></div><h3 id="emit-触发自定义事件" tabindex="-1">$emit 触发自定义事件 <a class="header-anchor" href="#emit-触发自定义事件" aria-hidden="true">#</a></h3><ul><li>适用场景：子组件传递数据给父组件</li><li>子组件通过<code>$emit触发</code>自定义事件，<code>$emit</code>第二个参数为传递的数值</li><li>父组件绑定监听器获取到子组件传递过来的参数</li></ul><p><code>Chilfen.vue</code></p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$emit</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">add</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> good)  </span></span>
<span class="line"></span></code></pre></div><p><code>Father.vue</code></p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Children</span><span style="color:#89DDFF;"> @add=&quot;cartAdd($event)&quot; /&gt;</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"></span></code></pre></div><h3 id="ref" tabindex="-1">ref <a class="header-anchor" href="#ref" aria-hidden="true">#</a></h3><ul><li>父组件在使用子组件的时候设置<code>ref</code></li><li>父组件通过设置子组件<code>ref</code>来获取数据</li></ul><p>父组件</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Children</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">ref</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">foo</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">$refs</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">foo  </span><span style="color:#676E95;">// 获取子组件实例，通过子组件实例我们就能拿到对应的数据  </span></span>
<span class="line"></span></code></pre></div><h3 id="eventbus" tabindex="-1">EventBus <a class="header-anchor" href="#eventbus" aria-hidden="true">#</a></h3><ul><li>使用场景：兄弟组件传值</li><li>创建一个中央事件总线<code>EventBus</code></li><li>兄弟组件通过<code>$emit</code>触发自定义事件，<code>$emit</code>第二个参数为传递的数值</li><li>另一个兄弟组件通过<code>$on</code>监听自定义事件</li></ul><p><code>Bus.js</code></p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#676E95;">// 创建一个中央时间总线类  </span></span>
<span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Bus</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#C792EA;">constructor</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">callbacks</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{};</span><span style="color:#F07178;">   </span><span style="color:#676E95;">// 存放事件的名字  </span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">$on</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;">fn</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">callbacks</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">callbacks</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> []</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">callbacks</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">fn</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">$emit</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">callbacks</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">]) </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">callbacks</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">cb</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cb</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#676E95;">// main.js  </span></span>
<span class="line"><span style="color:#FFCB6B;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">prototype</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">$bus </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Bus</span><span style="color:#A6ACCD;">() </span><span style="color:#676E95;">// 将$bus挂载到vue实例的原型上  </span></span>
<span class="line"><span style="color:#676E95;">// 另一种方式  </span></span>
<span class="line"><span style="color:#FFCB6B;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">prototype</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">$bus </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Vue</span><span style="color:#A6ACCD;">() </span><span style="color:#676E95;">// Vue已经实现了Bus的功能  </span></span>
<span class="line"></span></code></pre></div><p><code>Children1.vue</code></p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">$bus</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">$emit</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">foo</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)  </span></span>
<span class="line"></span></code></pre></div><p><code>Children2.vue</code></p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">$bus</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">$on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">foo</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">handle)  </span></span>
<span class="line"></span></code></pre></div><h3 id="parent-或-root" tabindex="-1">$parent 或$ root <a class="header-anchor" href="#parent-或-root" aria-hidden="true">#</a></h3><ul><li>通过共同祖辈<code>$parent</code>或者<code>$root</code>搭建通信桥连</li></ul><p>兄弟组件</p><p><code>this.$parent.on(&#39;add&#39;,this.add) </code></p><p>另一个兄弟组件</p><p><code>this.$parent.emit(&#39;add&#39;) </code></p><h3 id="attrs-与-listeners" tabindex="-1">$attrs 与$ listeners <a class="header-anchor" href="#attrs-与-listeners" aria-hidden="true">#</a></h3><ul><li>适用场景：祖先传递数据给子孙</li><li>设置批量向下传属性<code>$attrs</code>和 <code>$listeners</code></li><li>包含了父级作用域中不作为 <code>prop</code> 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。</li><li>可以通过 <code>v-bind=&quot;$attrs&quot;</code> 传⼊内部组件</li></ul><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#676E95;">// child：并未在props中声明foo  </span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;">&gt;{{</span><span style="color:#A6ACCD;">$attrs.foo</span><span style="color:#89DDFF;">}}&lt;/</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#676E95;">// parent  </span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">HelloWorld</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">foo</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">foo</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">/&gt;</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"></span></code></pre></div><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#676E95;">// 给Grandson隔代传值，communication/index.vue  </span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Child2</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">msg</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">lalala</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @some-event=&quot;onSomeEvent&quot;&gt;&lt;/Child2&gt;  </span></span>
<span class="line"><span style="color:#89DDFF;">  </span></span>
<span class="line"><span style="color:#676E95;">// Child2做展开  </span></span>
<span class="line"><span style="color:#89DDFF;">&lt;Grandson </span><span style="color:#C792EA;">v-bind</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">$attrs</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-on</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">$listeners</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#FFCB6B;">Grandson</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#676E95;">// Grandson使⽤  </span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> @click=&quot;$emit(&#39;some-event&#39;, </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">msg from grandson</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)&quot;&gt;  </span></span>
<span class="line"><span style="color:#89DDFF;">{{</span><span style="color:#A6ACCD;">msg</span><span style="color:#89DDFF;">}}  </span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/div&gt;  </span></span>
<span class="line"></span></code></pre></div><h3 id="provide-与-inject" tabindex="-1">provide 与 inject <a class="header-anchor" href="#provide-与-inject" aria-hidden="true">#</a></h3><ul><li>在祖先组件定义<code>provide</code>属性，返回传递的值</li><li>在后代组件通过<code>inject</code>接收组件传递过来的值</li></ul><p>祖先组件</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#82AAFF;">provide</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#F07178;">        foo</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">foo</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"></span></code></pre></div><p>后代组件</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#FFCB6B;">inject</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">[</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">foo</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">] </span><span style="color:#676E95;">// 获取到祖先组件传递过来的值  </span></span>
<span class="line"></span></code></pre></div><h3 id="vuex" tabindex="-1"><code>vuex</code> <a class="header-anchor" href="#vuex" aria-hidden="true">#</a></h3><ul><li><p>适用场景: 复杂关系的组件数据传递</p></li><li><p><code>Vuex</code>作用相当于一个用来存储共享变量的容器 <img src="https://static.vue-js.com/fa207cd0-3aca-11eb-ab90-d9ae814b240d.png" alt=""></p></li><li><p><code>state</code>用来存放共享变量的地方</p></li><li><p><code>getter</code>，可以增加一个<code>getter</code>派生状态，(相当于<code>store</code>中的计算属性），用来获得共享变量的值</p></li><li><p><code>mutations</code>用来存放修改<code>state</code>的方法。</p></li><li><p><code>actions</code>也是用来存放修改state的方法，不过<code>action</code>是在<code>mutations</code>的基础上进行。常用来做一些异步操作</p></li></ul><h3 id="小结" tabindex="-1">小结 <a class="header-anchor" href="#小结" aria-hidden="true">#</a></h3><ul><li>父子关系的组件数据传递选择 <code>props</code>  与 <code>$emit</code>进行传递，也可选择<code>ref</code></li><li>兄弟关系的组件数据传递可选择<code>$bus</code>，其次可以选择<code>$parent</code>进行传递</li><li>祖先与后代组件数据传递可选择<code>attrs</code>与<code>listeners</code>或者 <code>Provide</code>与 <code>Inject</code></li><li>复杂关系的组件数据传递可以通过<code>vuex</code>存放共享的变量</li></ul><h2 id="参考文献" tabindex="-1">参考文献 <a class="header-anchor" href="#参考文献" aria-hidden="true">#</a></h2><ul><li><a href="https://juejin.cn/post/6844903990052782094#heading-0" target="_blank" rel="noreferrer">https://juejin.cn/post/6844903990052782094#heading-0</a></li><li><a href="https://zh.wikipedia.org/wiki/%5C%E9%5C%80%5C%9A%5C%E4%5C%BF%5C%A1" target="_blank" rel="noreferrer">https://zh.wikipedia.org/wiki/\�\�\�\�\�\�</a></li><li><a href="https://vue3js.cn/docs/zh" target="_blank" rel="noreferrer">https://vue3js.cn/docs/zh</a></li></ul><p>面试官VUE系列总进度：5／33</p><p><a href="http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw==&amp;mid=2247484101&amp;idx=1&amp;sn=83b0983f0fca7d7c556e4cb0bff8c9b8&amp;chksm=fc10c093cb674985ef3bd2966f66fc28c5eb70b0037e4be1af4bf54fb6fa9571985abd31d52f&amp;scene=21#wechat_redirect" target="_blank" rel="noreferrer">面试官：说说你对vue的理解?</a></p><p><a href="http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw==&amp;mid=2247484119&amp;idx=1&amp;sn=d171b28a00d42549d279498944a98519&amp;chksm=fc10c081cb6749976814aaeda6a6433db418223cec57edda7e15b9e5a0ca69ad549655639c61&amp;scene=21#wechat_redirect" target="_blank" rel="noreferrer">面试官：说说你对SPA（单页应用）的理解?</a></p><p><a href="http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw==&amp;mid=2247484167&amp;idx=1&amp;sn=7b00b4333ab2722f25f12586b70667ca&amp;chksm=fc10c151cb6748476008dab2f4e6c6264f5d19678305955c85cec1b619e56e8f7457b7357fb9&amp;scene=21#wechat_redirect" target="_blank" rel="noreferrer">面试官：说说你对双向绑定的理解?</a></p><p><a href="http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw==&amp;mid=2247484176&amp;idx=1&amp;sn=5623421ed2678046ed9e438aadf6e26f&amp;chksm=fc10c146cb67485015f24f7e9f5862c4c685fc33485fe30e1b375a534b4031978439c554e0c0&amp;scene=21#wechat_redirect" target="_blank" rel="noreferrer">面试官：说说你对Vue生命周期的理解?</a></p><p><img src="https://static.vue-js.com/821b87b0-3ac6-11eb-ab90-d9ae814b240d.png" alt=""></p></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-f0af2311 data-v-a54a85bd><div class="edit-info" data-v-a54a85bd><!----><div class="last-updated" data-v-a54a85bd><p class="VPLastUpdated" data-v-a54a85bd data-v-f7d51a9c>Last updated: <time datatime="2022-09-22T09:50:29.000Z" data-v-f7d51a9c></time></p></div></div><div class="prev-next" data-v-a54a85bd><div class="pager" data-v-a54a85bd><a class="pager-link prev" href="/vue/components_plugin.html" data-v-a54a85bd><span class="desc" data-v-a54a85bd>Previous page</span><span class="title" data-v-a54a85bd>10.Vue中组件和插件有什么区别？</span></a></div><div class="has-prev pager" data-v-a54a85bd><a class="pager-link next" href="/vue/bind.html" data-v-a54a85bd><span class="desc" data-v-a54a85bd>Next page</span><span class="title" data-v-a54a85bd>12.说说你对双向绑定的理解?</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-ca9ccb7e data-v-9f24cc86><div class="container" data-v-9f24cc86><p class="message" data-v-9f24cc86>Released under the MIT License.</p><p class="copyright" data-v-9f24cc86>Copyright © 2022-present xiumubai</p></div></footer><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"javascript_bom.md\":\"b4feb213\",\"javascript_dom.md\":\"115217f2\",\"javascript_ajax.md\":\"4cd66d00\",\"javascript_array_api.md\":\"fc7e9f5e\",\"javascript_bind_call_apply.md\":\"5037ea1f\",\"javascript_cache.md\":\"3cab1e33\",\"javascript_closure.md\":\"a011a286\",\"javascript_compare.md\":\"8bd00b66\",\"javascript_context_stack.md\":\"eff24dfd\",\"javascript_continue_to_upload.md\":\"8b9f775e\",\"javascript_copy.md\":\"9e6f3d4e\",\"javascript_data_type.md\":\"6773ee7f\",\"javascript_debounce_throttle.md\":\"37f66fe3\",\"javascript_event_model.md\":\"df25b298\",\"javascript_event_agent.md\":\"de86b13f\",\"javascript_event_loop.md\":\"ec105c46\",\"javascript_function_cache.md\":\"722b5929\",\"javascript_functional_programming.md\":\"74c57d2b\",\"javascript_inherit.md\":\"bfe04b52\",\"javascript_js_data_structure.md\":\"3d5793d5\",\"javascript_loss_accuracy.md\":\"4a5e1e83\",\"javascript_memory_leak.md\":\"7f468176\",\"javascript_new.md\":\"a7c10c2f\",\"javascript_prototype.md\":\"ba4aad9c\",\"javascript_pull_up_loading_pull_down_refresh.md\":\"bcd55b26\",\"javascript_regexp.md\":\"5cdd425f\",\"javascript_scope.md\":\"19d93e6d\",\"javascript_security.md\":\"5bc240c7\",\"javascript_single_sign.md\":\"22b66bf9\",\"javascript_string_api.md\":\"4431266e\",\"javascript_tail_recursion.md\":\"d10c1177\",\"javascript_this.md\":\"67dd8f3a\",\"javascript_type_conversion.md\":\"089b68ca\",\"javascript_typeof_instanceof.md\":\"a0ea8297\",\"javascript_visible.md\":\"1b8c1427\",\"nodejs_buffer.md\":\"86b6fada\",\"nodejs_eventemitter.md\":\"4424fd2c\",\"nodejs_stream.md\":\"b2fa0025\",\"nodejs_event_loop.md\":\"03c1b709\",\"nodejs_file_upload.md\":\"37ab2103\",\"nodejs_fs.md\":\"9221e437\",\"nodejs_global.md\":\"a1b3fd28\",\"nodejs_jwt.md\":\"d986798b\",\"nodejs_middleware.md\":\"c2c968c4\",\"nodejs_nodejs.md\":\"6ba067a4\",\"nodejs_paging.md\":\"8b76e487\",\"nodejs_performance.md\":\"fa9c1623\",\"nodejs_process.md\":\"3d717454\",\"nodejs_require_order.md\":\"6e9b880f\",\"react_binding events.md\":\"606997b9\",\"react_building components.md\":\"2460627f\",\"react_fiber.md\":\"e3a3ac5c\",\"react_high order components.md\":\"804cdc8c\",\"react_improve performance.md\":\"2b4cd579\",\"react_jsx to dom.md\":\"7da96f4e\",\"react_react hooks.md\":\"ac1889e4\",\"react_react router model.md\":\"d7e60a7d\",\"react_react router.md\":\"58e50995\",\"react_react refs.md\":\"a90f5a94\",\"react_react.md\":\"6c1f12f1\",\"react_real dom_virtual dom.md\":\"78c68534\",\"react_redux middleware.md\":\"f9c0c1a5\",\"react_syntheticevent.md\":\"937038a1\",\"react_animation.md\":\"51b808f8\",\"react_capture error.md\":\"ab82c7b3\",\"react_class_function component.md\":\"dec93b8e\",\"react_communication.md\":\"63ecc8dd\",\"react_controlled_uncontrolled.md\":\"929967ab\",\"react_diff.md\":\"6758822a\",\"react_how to use redux.md\":\"87b15e2e\",\"react_immutable.md\":\"32f831f3\",\"react_import css.md\":\"6b24701d\",\"react_improve_render.md\":\"0080c4c8\",\"react_key.md\":\"8b76383f\",\"react_life cycle.md\":\"ffcbc76b\",\"react_redux.md\":\"e2fcb8f3\",\"react_render.md\":\"a9b9a91f\",\"react_server side rendering.md\":\"1cbca1f2\",\"react_setstate.md\":\"03ba5fb6\",\"react_state_props.md\":\"b80f455f\",\"react_summary.md\":\"47a9aa61\",\"react_super()_super(props).md\":\"e5fd40c9\",\"algorithm_algorithm.md\":\"6f482d8b\",\"algorithm_binarysearch.md\":\"3a4c14f4\",\"algorithm_heap.md\":\"fe5839ed\",\"algorithm_linked list.md\":\"ec192250\",\"algorithm_bubblesort.md\":\"cf87b40d\",\"algorithm_design1.md\":\"bd491cfe\",\"algorithm_design2.md\":\"941bf6ba\",\"algorithm_graph.md\":\"ddab9801\",\"algorithm_insertionsort.md\":\"7ad6d0c6\",\"algorithm_mergesort.md\":\"d704839d\",\"algorithm_quicksort.md\":\"04e65ce9\",\"algorithm_selectionsort.md\":\"c751f8ed\",\"algorithm_set.md\":\"aa1a236e\",\"algorithm_sort.md\":\"69fbb06f\",\"algorithm_stack_queue.md\":\"09cb42c4\",\"algorithm_structure.md\":\"8ceb1498\",\"algorithm_time_space.md\":\"20afcad9\",\"algorithm_tree.md\":\"8880d846\",\"applet_webview_jscore.md\":\"b5d697c3\",\"applet_applet.md\":\"fd446e94\",\"applet_lifecycle.md\":\"fdf96326\",\"applet_login.md\":\"000d8413\",\"applet_navigate.md\":\"661447e1\",\"applet_optimization.md\":\"4483173a\",\"applet_publish.md\":\"75f5f978\",\"applet_requestpayment.md\":\"96dce311\",\"css_bfc.md\":\"be6458b1\",\"css_animation.md\":\"c69b6036\",\"css_box.md\":\"134dc0e2\",\"css_center.md\":\"671d90b4\",\"css_column_layout.md\":\"17662907\",\"css_css3_features.md\":\"07c233e8\",\"css_css_performance.md\":\"1e723fed\",\"css_dp_px_dpr_ppi.md\":\"baf193db\",\"css_em_px_rem_vh_vw.md\":\"d8841819\",\"css_flexbox.md\":\"60b4d3a2\",\"css_grid.md\":\"fe9da145\",\"css_hide_attributes.md\":\"294742dd\",\"css_layout_painting.md\":\"0b4c79e9\",\"css_less_12px.md\":\"0b872326\",\"css_responsive_layout.md\":\"a92ea8dd\",\"css_sass_less_stylus.md\":\"35f379b9\",\"css_selector.md\":\"17b6992a\",\"css_single_multi_line.md\":\"139fb49a\",\"css_triangle.md\":\"445f3e5e\",\"css_visual_scrolling.md\":\"b22bdee4\",\"demo_index.md\":\"90a5f28c\",\"es6_array.md\":\"b2d9c780\",\"es6_decorator.md\":\"0155aa71\",\"es6_function.md\":\"b2a54be3\",\"es6_generator.md\":\"ab397709\",\"es6_module.md\":\"8074618d\",\"es6_object.md\":\"02960089\",\"es6_promise.md\":\"ba7c72e0\",\"es6_proxy.md\":\"5d343ca0\",\"es6_set_map.md\":\"16366c0a\",\"es6_var_let_const.md\":\"94c5a2e5\",\"git_git.md\":\"81cfa072\",\"git_head_tree_index.md\":\"8da2b48e\",\"git_command.md\":\"d398f681\",\"git_conflict.md\":\"6ace32b7\",\"git_fork_clone_branch.md\":\"60d8b215\",\"git_git_pull_git_fetch.md\":\"7ba61a26\",\"git_git_rebase_git_merge.md\":\"24044b46\",\"git_git_reset_git_revert.md\":\"0573874e\",\"git_git_stash.md\":\"b2108bb4\",\"git_version_control.md\":\"5315b3a1\",\"http_1.0_1.1_2.0.md\":\"f4855f53\",\"http_cdn.md\":\"8db3cb9d\",\"http_dns.md\":\"5bb40fe6\",\"http_get_post.md\":\"54952aa8\",\"http_https.md\":\"42a442c8\",\"http_http_https.md\":\"584d2870\",\"http_osi.md\":\"feab35f0\",\"http_tcp_ip.md\":\"9a3280d8\",\"http_udp_tcp.md\":\"8d5731e8\",\"http_websocket.md\":\"b78e9a8f\",\"http_after_url.md\":\"ed13fb23\",\"http_handshakes_waves.md\":\"7f21a38c\",\"http_headers.md\":\"77af020f\",\"http_status.md\":\"731daad7\",\"index.md\":\"b249642b\",\"typescript_class.md\":\"3bc756f0\",\"typescript_data_type.md\":\"8b852fca\",\"typescript_decorator.md\":\"09934301\",\"typescript_enum.md\":\"f05a48e4\",\"typescript_function.md\":\"aa1f6c95\",\"typescript_generic.md\":\"066edb51\",\"typescript_high type.md\":\"bdf59b40\",\"typescript_interface.md\":\"3ebee750\",\"typescript_namespace_module.md\":\"2af77e9c\",\"typescript_react.md\":\"6ca91139\",\"typescript_typescript_javascript.md\":\"e89507d8\",\"typescript_vue.md\":\"a39dd1b5\",\"vue_404.md\":\"1b714ff3\",\"vue_axios.md\":\"a1e96e5f\",\"vue_axioscode.md\":\"fccd1ad0\",\"vue_bind.md\":\"4c20085d\",\"vue_communication.md\":\"3f059e41\",\"vue_components_plugin.md\":\"2b4f21b2\",\"vue_cors.md\":\"6aede5b3\",\"vue_data.md\":\"18d617df\",\"vue_data_object_add_attrs.md\":\"94cf2218\",\"vue_diff.md\":\"37e2c3ee\",\"vue_directive.md\":\"9b5aed0e\",\"vue_error.md\":\"347dc9f7\",\"vue_filter.md\":\"ff72d81c\",\"vue_first_page_time.md\":\"1cf8d795\",\"vue_if_for.md\":\"28139518\",\"vue_keepalive.md\":\"b8401dc5\",\"vue_key.md\":\"05160f3e\",\"vue_lifecycle.md\":\"21135238\",\"vue_mixin.md\":\"ed53004e\",\"vue_modifier.md\":\"f82a3264\",\"vue_new_vue.md\":\"0244ca48\",\"vue_nexttick.md\":\"dd0380b1\",\"vue_observable.md\":\"edc5c364\",\"vue_permission.md\":\"90cc7a15\",\"vue_show_if.md\":\"706a56de\",\"vue_slot.md\":\"820aa4ac\",\"vue_spa.md\":\"75e55e32\",\"vue_ssr.md\":\"3f6ba2de\",\"vue_structure.md\":\"170a36be\",\"vue_vnode.md\":\"a1edc5ce\",\"vue_vue.md\":\"07289420\",\"vue3_composition.md\":\"4ca97a72\",\"vue3_goal.md\":\"7224e393\",\"vue3_modal_component.md\":\"7245015a\",\"vue3_performance.md\":\"535b5faa\",\"vue3_proxy.md\":\"17acfa40\",\"vue3_treeshaking.md\":\"8732cc75\",\"webpack_hmr.md\":\"2bf5fb55\",\"webpack_loader.md\":\"5a6680be\",\"webpack_loader_plugin.md\":\"01307ebe\",\"webpack_plugin.md\":\"fb205e68\",\"webpack_rollup_parcel_snowpack_vite.md\":\"2ce2d9e1\",\"webpack_build_process.md\":\"fbd4e2e7\",\"webpack_improve_build.md\":\"496f4f12\",\"webpack_performance.md\":\"ebeffcd8\",\"webpack_proxy.md\":\"3619d807\",\"webpack_webpack.md\":\"0fddbfa8\"}")</script>
    <script type="module" async src="/assets/app.1cdb2ec5.js"></script>
    
  </body>
</html>